<template>
    <div class="multiple-xuanxiangzhi">
        <el-checkbox-group v-model="questionAnswer" v-for="(item, index) in optionsList" class="checkbox-group">
            <el-checkbox class="check" :values="englishWordsArr[index]"
                :label="englishWordsArr[index]">{{ englishWordsArr[index] }} {{ item.value }}</el-checkbox>111
            <!-- <el-input v-model="item.value" :disabled="true" class="checkbox-input" placeholder="选项，点此编辑，选中即设置为正确答案（必填）" /> -->
        </el-checkbox-group>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getqueryBankAPI } from '@/api/api'

//题目内容信息
// const quesData = ref({
//     //选项
//     optionsList: [],
//     //题目
//     questionTitle: '',
// })
const optionsList = ref([])
//答案
const questionAnswer = ref([])
//选项
const englishWordsArr = ['A.', 'B.', 'C.', 'D.', 'E.', 'F.', 'G.', 'H.', 'I.', 'J.']
const props = defineProps({
    questionId: {
        default: "",
    }
})
onMounted(() => {
    //查询题目
    if (props.questionId) {
        getqueryBankAPI(props.questionId).then(res => {
            if (res.data.code == 200) {
                // res.data.data.questionAnswer = JSON.parse(res.data.data.questionAnswer)
                optionsList.value = JSON.parse(res.data.data.optionsList)
                // quesData.value = res.data.data
            }
        })
    }

})

</script>

<style lang="less" scoped>
.multiple-xuanxiangzhi {
    display: block;

    .checkbox-group {
        display: flex;
        text-align: center;
    }

    .check {
        margin: 8px 0 0 10px;
    }

    .checkbox-input {
        font-size: 15px;
        margin-top: 8px;
        color: black;
    }

    // :deep(.el-input__wrapper) {
    //     box-shadow: none;
    //     background-color: #fff;
    // }

    // /** el-input disabled时的文字颜色*/
    // .el-input.is-disabled .el-input__inner {
    //     color: #d61616;
    // }

    // /** el-input disabled时的背景和边框*/
    // .el-input.is-disabled {
    //     box-shadow: none;
    //     background-color: #fff;
    //     color: #d61616;
    // }


}
</style>